import React, { PureComponent } from 'react';
import { PropTypes } from 'prop-types';
import * as collectionService from '../service/collections';
import { Card, Icon, message } from 'antd';
import { LazyImageFull, ImageState } from "react-lazy-images";

class Detail extends PureComponent {
  static defaultProps = {
    detailList: [],//详情作品
    username:'',
    info:'',
    avatarurl:''
  }
  static propTypes = {
      detailList:PropTypes.array,
      username:PropTypes.string,
      info:PropTypes.string,
      avatarurl:PropTypes.string
  }
  state = {
    detailList:this.props.detailList,
    username:this.props.username,
    info:this.props.info,
    avatarurl:this.props.avatarurl
  }
  componentDidMount() {
    this.getDetailList();
  }
  getDetailList(){
    if(this.props.match.params.id){
      collectionService.detailList(this.props.match.params.id).then(res=>{
        console.log(res)
        if(res.ret_no<0){
          var res = {
            "ret_no": 200,
            "ret_msg": {
            "id": "14834",
            "uid": "38298416",
            "username": "晴天小妹朵",
            "info": "韵",
            "sys_status": "2",
            "pic": [
              {
              "big": "https://p0.ssl.qhmsg.com/t01d8d067f9cd958016.jpg",
              "small": "https://p0.ssl.qhmsg.com/dmfd/400_300_70/t01d8d067f9cd958016.jpg"
              },
              {
              "big": "https://p0.ssl.qhmsg.com/t013a0c3d43a52a66da.jpg",
              "small": "https://p0.ssl.qhmsg.com/dmfd/400_300_70/t013a0c3d43a52a66da.jpg"
              },
              {
              "big": "https://p0.ssl.qhmsg.com/t012c73c4f8a128f633.jpg",
              "small": "https://p0.ssl.qhmsg.com/dmfd/400_300_70/t012c73c4f8a128f633.jpg"
              },
              {
              "big": "https://p0.ssl.qhmsg.com/t0161ea45ff0273f5ec.jpg",
              "small": "https://p0.ssl.qhmsg.com/dmfd/400_300_70/t0161ea45ff0273f5ec.jpg"
              }
            ],
            "avatarurl": "https://ucenter.bbs.360.cn/avatar.php?uid=38298416&size=middle&random=0"
            }
          }
        }
        this.setState({
          detailList:res.ret_msg.pic,
          username:res.ret_msg.username,
          info:res.ret_msg.info,
          avatarurl:res.ret_msg.avatarurl
        }) 
      })
    } else {
      message.error('没有ID值');
    } 
  }
  render() {
    return (
      <div className="showpic">
        <div className="showpic_body">
          <div className="showpic_header">
            <span className="showpic_header_left">{this.state.info}</span>
            <span className="showpic_header_right"><span>{this.state.username}</span><img src={this.state.avatarurl}></img></span>
          </div>
          <ul className="picBoxCont">
          {
            this.state.detailList && this.state.detailList.map((val,inx)=>
              <li key={inx}>
                <LazyImageFull className="picBoxContimg" src={val.big}>
                    {({ imageProps, imageState, ref }) => (
                      <img
                        {...imageProps}
                        ref={ref}
                        src={
                          imageState === ImageState.LoadSuccess
                            ? imageProps.src
                            : val.small
                        }
                        style={{ opacity: ImageState.LoadSuccess ? "1" : "0.5" }}
                      />
                    )}
                </LazyImageFull>
              </li>
            )
          }
          </ul>
        </div>
      </div>
    );
  }
}

export default Detail;
